<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            height: 250px;
            border: 1px solid black;
            margin: 0 auto ;
            text-align: center;
        }
        h1{
            
            margin: 20px 0px;
        }
        p{
            margin-bottom: 20px;
        }
        .cr{
            color: red;
        }
        button{
            padding: 5px 20px;
            margin: 0px 10px;
        }
        .time{
            position: relative;
            left: 200px;
            width: 80px;
            height: 50px;
            padding: 5px;
            border: 1px solid pink;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <h1>随机问答</h1>
        <p class="time">10</p>
        <p>
            <span>问题是：</span>
            <span class="cr"></span>
        </p>
        <button class="btn1">开始</button>
        <button class="btn2">结束</button>
    </div>


    <script>
        let arr = ['周杰伦', '刘德华', '周星驰', '范老师', '张学友']
        let time = 0
        let ran = 0
        let i =10
        const btn1 = document.querySelector('button')
        const btn2 = document.querySelector('.btn2')
        const span = document.querySelector('.cr')
        const t = document.querySelector('.time')
        btn1.addEventListener('click',function(){
                time = setInterval(function(){
                ran = Math.floor(Math.random()*arr.length)
                span.innerHTML = arr[ran]
                i--
                t.innerHTML = i
                if(i===0){
                    clearInterval(time)
                }
            },1000)
            if(arr.length ===1){
                btn1.disabled = true
                btn2.disabled = true
                alert('只剩一个数据')
            }
        })
         btn2.addEventListener('click',function(){
            clearInterval(time)
            arr.splice(ran,1)
            console.log(arr)
        })
    </script>
</body>
</html>